<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>演示：纯CSS3实现超酷的鼠标悬停效果</title>
<meta name="keywords" content="css3" />
<link rel="stylesheet" type="text/css" href="style.css" />
<style>
.demo{width:360px; margin:60px auto 10px auto}
@media only screen and (min-width: 420px) {
	.demo{width:800px; margin:60px auto 10px auto}
}
.box{float:left; width:380px; height:260px}
.clear{clear:both}
</style>
</head>
<body>
<div id="main">
<div class="demo">
<div class="box">
<div class="he_border1">
<img class="he_border1_img" src="pro_1.jpg" alt="Image 01">
<div class="he_border1_caption">
<h3 class="he_border1_caption_h">jQuery插件库</h3>
<p class="he_border1_caption_p">WEB前端应用教程+演示+源码</p>
<a class="he_border1_caption_a" href="#"></a>
</div>
</div>
</div>
<div class="box">
<div class="he_border2">
<img class="he_border2_img" src="pro_2.jpg" alt="Image 01">
<div class="he_border2_caption">
<h3 class="he_border2_caption_h">jQuery插件库</h3>
<p class="he_border2_caption_p">WEB前端应用教程+演示+源码</p>
<a class="he_border2_caption_a" href="#"></a>
</div>
</div>
</div>
<div class="box">
<div class="he_3DFlipX">
<div class="he_3DFlipX_inner">
<div class="he_3DFlipX_img">
<img src="pro_3.jpg" alt="img01">
</div>
<div class="he_3DFlipX_caption">
<h3>jQuery插件库</h3>
<p>WEB前端应用教程+演示+源码</p>
</div>
<a href="#"></a>
</div>
</div>
</div>
<div class="box">
<div class="he_3DFlipY">
<div class="he_3DFlipY_inner">
<div class="he_3DFlipY_img">
<img src="pro_1.jpg" alt="img01">
</div>
<div class="he_3DFlipY_caption">
<h3>jQuery插件库</h3>
<p>WEB前端应用教程+演示+源码</p>
</div>
<a href="#"></a>
</div>
</div>
</div>
<div class="box">
<div class="he_ZoomInImg">
<img class="he_ZoomInImg_img" src="pro_2.jpg" alt="Image 01">
<div class="he_ZoomInImg_caption">
<h3 class="he_ZoomInImg_caption_h">jQuery插件库</h3>
<p class="he_ZoomInImg_caption_p">WEB前端应用教程+演示+源码</p>
<a class="he_ZoomInImg_caption_a" href="#"></a>
</div>
</div>
</div>
<div class="box">
<div class="he_ZoomOutImg">
<img class="he_ZoomOutImg_img" src="pro_3.jpg" alt="Image 01">
<div class="he_ZoomOutImg_caption">
<h3 class="he_ZoomOutImg_caption_h">jQuery插件库</h3>
<p class="he_ZoomOutImg_caption_p">WEB前端应用教程+演示+源码</p>
<a class="he_ZoomOutImg_caption_a" href="#"></a>
</div>
</div>
</div>
<div class="box">
<div class="he_slideCaptionDown">
<img class="he_slideCaptionDown_img" src="pro_1.jpg" alt="Image 01">
<div class="he_slideCaptionDown_caption">
<h3 class="he_slideCaptionDown_caption_h">jQuery插件库</h3>
<p class="he_slideCaptionDown_caption_p">WEB前端应用教程+演示+源码</p>
<a class="he_slideCaptionDown_caption_a" href="#"></a>
</div>
</div>
</div>
<div class="box">
<div class="he_slideAllDown">
<img class="he_slideAllDown_img" src="pro_2.jpg" alt="Image 01">
<div class="he_slideAllDown_caption">
<h3 class="he_slideAllDown_caption_h">jQuery插件库</h3>
<p class="he_slideAllDown_caption_p">WEB前端应用教程+演示+源码</p>
<a class="he_slideAllDown_caption_a" href="#"></a>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</body>
</html>